<template>
  <!-- 菜单栏 -->
  <div id="navber" v-if="isShow">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      router
    >
      <!-- 首页 -->
      <el-menu-item index="/">
        <i class="iconfont icon-zhuye myicon"></i>
        <span slot="title">{{ $t("navbar.home") }}</span>
      </el-menu-item>
      <!-- xx组 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航二</span>
        </template>
        <el-menu-item-group>
          <span slot="title">分组一</span>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>

      <el-menu-item index="/login">
        <i class="el-icon-setting"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>

    <!-- 控制缩放 -->
    <div class="zoom">
      <el-tooltip
        class="item"
        effect="light"
        :content="this.switch.content"
        placement="left"
      >
        <i
          class="iconfont myicon"
          :class="this.switch.icon"
          @click="change"
        ></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: "NavCom",
  props: {},
  data() {
    return {
      isCollapse: false,
      switch: {
        icon: "icon-zhankaicaidan",
        content: "展开",
      }
    };
  },
  computed: {
    ...mapState(['isShow'])
  },
  methods: {
    change() {
      this.isCollapse = !this.isCollapse;
      if (!this.isCollapse) {
        this.switch = Object.assign({
          icon: "icon-shousuo",
          content: "收起",
        });
      } else {
        this.switch = Object.assign({
          icon: "icon-zhankaicaidan",
          content: "展开",
        });
      }
      console.log(this.switch);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
    
  },
  mounted() {
    
  },
};
</script>
<style lang="scss" scoped>
// 导航
#navber {
  height: 100%;
  position: relative;
  // 伸缩
  .zoom {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    // border-top: 1px solid #409eff;
    box-shadow: -1px -1px 3px 0 #409eff;
    i {
      margin-left: 17px;
      text-shadow: h-shadow v-shadow blur color;
      color: #409eff;
    }
  }
}
// 菜单栏长度
.el-menu-vertical-demo {
  height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
// 自定义图标样式
.myicon {
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 18px;
  font-size: 18px;
  margin-right: 5px;
  text-align: center;
}
</style>